import React, { useEffect, useState } from 'react'
import s from './style.module.less'
import cx from 'classnames'
import Card from '@/components/Card'
import { useStore, observer } from '@/store'
import axios from '@/utils/axios.js'
import { useNavigate } from 'react-router-dom'


const Botton = () => {
    const { homeStore } = useStore()
    const [show, setShow] = useState('recommend')
    const [recommend, setRecommend] = useState('')
    const [oldHouse, setOldHouse] = useState('')
    const [newHouse, setNewHouse] = useState('')
    const [rentHouse, setRentHouse] = useState('')
    const [hasMore, setHasMore] = useState(true)
    const [data, setData] = useState([])

    const changePage = (page) => {
        setShow(page)
    }

    const selectType = () => {
        if (show === 'recommend') {
            homeStore.arr = homeStore.recommendItem
        } else if (show === 'oldHouse') {
            homeStore.arr = homeStore.oldHouseItem
        } else if (show === 'newHouse') {
            homeStore.arr = homeStore.newHouseItem
        } else {
            homeStore.arr = homeStore.rentHouseItem
        }
    }

    useEffect(() => {
        selectType()
    })
    useEffect(() => {
        getData()
    }, [])


    const getData = async () => {
        await axios.get('/home/all').then(res => {
            // console.log(res.data);

            const recommendItem = res.data.recommendItem   // 推荐
            homeStore.saveRecommendItem(recommendItem)
            setRecommend(recommendItem)
            const oldHouseItem = res.data.oldHouse   // 二手房
            homeStore.saveOldHouseItem(oldHouseItem)
            setOldHouse(oldHouseItem)
            const newHouseItem = res.data.newHouse   // 新房
            homeStore.saveNewHouseItem(newHouseItem)
            setNewHouse(newHouseItem)
            const rentHouseItem = res.data.rentHouse   // 租房
            homeStore.saveRentHouseItem(rentHouseItem)
            setRentHouse(rentHouseItem)
            // console.log(homeStore.recommendItem);
        })
    }

    return (


        <div className={s.main}>
            <div className={s.title}>
                <div className={cx({ [s.titleName]: true, [s.active]: show === 'recommend' })} onClick={() => changePage('recommend')}>推荐</div>
                <div className={cx({ [s.titleName]: true, [s.active]: show === 'oldHouse' })} onClick={() => changePage('oldHouse')}>二手房</div>
                <div className={cx({ [s.titleName]: true, [s.active]: show === 'newHouse' })} onClick={() => changePage('newHouse')}>新房</div>
                <div className={cx({ [s.titleName]: true, [s.active]: show === 'rentHouse' })} onClick={() => changePage('rentHouse')}>租房</div>
            </div>
            <div className={s.content}>
                    <div className={cx({
                        [s.cneter]:true
                    })}>
                        <div className={cx({ [s.recommend]: true, [s.hidden]: show !== 'recommend', })}>
                            {/* {
                                homeStore.recommendItem.map((item, index) => {
                                    return <Card key={index} />
                                })
                            } */}
                            <Card />
                        </div>

                    </div>


                    <div>
                        <div className={cx({ [s.recommend]: true, [s.hidden]: show !== 'oldHouse', })}>
                            {/* {
                                homeStore.oldHouseItem.map((item, index) => {
                                    return <Card key={index} />
                                })
                            } */}
                            <Card />
                        </div>

                    </div>

                    <div>
                        <div className={cx({ [s.recommend]: true, [s.hidden]: show !== 'newHouse', })}>
                            {/* {
                                homeStore.recommendItem.map((item, index) => {
                                    return <Card key={index} />
                                })
                            } */}
                            <Card />
                        </div>

                    </div>
                    <div>
                        <div className={cx({ [s.recommend]: true, [s.hidden]: show !== 'rentHouse', })}>
                            {/* {
                                homeStore.recommendItem.map((item, index) => {
                                    return <Card key={index} />
                                })
                            } */}
                            <Card />
                        </div>

                    </div>
            </div>
        </div>

    )
}


export default observer(Botton)